<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户列表</span>
      </div>
      <el-table :data="userData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="password" label="密码"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="tel" label="电话"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="userForm"
        >
          <el-form-item label="用户名">
            <el-input v-model="userForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="userForm.password"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="userForm.address"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="userForm.tel"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Users",

  data() {
    return {
      userData: [],
      userForm: {
        id: "",
        username: "",
        password: "",
        address: "",
        tel: "",
      },
      labelPosition: "right",
      dialogTitle: "",
      dialogVisible: false,
    };
  },

  mounted() {
    this.getAllUsers();
  },

  methods: {
    handleEdit(row) {
      this.dialogVisible = true;
      this.dialogTitle = "编辑";
      this.userForm.id = row.id;
      this.userForm.username = row.username;
      this.userForm.password = row.password;
      this.userForm.address = row.address;
      this.userForm.tel = row.tel;
    },
    handleDelete(id) {
      this.$axios
        .delete("/users/" + id)
        .then((res) => {
          if (res.status == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getAllUsers();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getAllUsers() {
      this.$axios.get("/users").then((res) => {
        this.userData = res.data;
      });
    },
    submit() {
      if (this.userForm.id > 0) {
        let data = {
          id: this.userForm.id,
          username: this.userForm.username,
          password:this.userForm.password,
          address: this.userForm.address,
          tel: this.userForm.tel,
        };
        this.$axios.put('/users/' + this.userForm.id,data).then(res => {
          if (res.status == 200) {
            //修改成功
            this.$message({
              message: '编辑信息成功',
              type: 'success'
            });
            this.getAllUsers();
            this.dialogVisible = false;
          } else {
            this.$message.error('编辑信息失败');
          }
        })
      }
    },
  },
};
</script>

<style scoped>
</style>